@reference "../src/main.css";

.p-select-panel,
.p-treeselect-panel,
.p-multiselect-panel,
.p-autocomplete-panel {
  background: var(--input-overlay-bg);
  /* No space between element and pop-up in PrimeVue, but TailwindUI uses mt-1 and that's looks better */
  @apply rounded-md shadow-lg mt-1 ring-1 ring-black ring-black/50 text-gray-900 focus:outline-none overflow-auto cursor-default select-none;
}

/* here filter for multiselect is located */
.p-multiselect-panel .p-multiselect-header {
  @apply py-2 px-3;
}

.p-select-panel .p-select-items,
.p-multiselect .p-multiselect-items,
.p-multiselect-panel .p-multiselect-items,
.p-multiselect .p-multiselect-items,
.p-autocomplete-panel .p-autocomplete-items {
  @apply py-1;
}

.p-select-panel .p-select-items .p-select-item,
.p-multiselect-panel .p-multiselect-items .p-multiselect-item,
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item {
  @apply py-2 px-3;
}

.p-treeselect-panel .p-tree .p-treenode .p-treenode-content {
  @apply py-2 px-3;
}

/*
PrimeVue doesn't have active property - meaning that on first open we cannot style element as "hover".
It is not a big deal, but also TailwindUI uses checkbox on the left to indicate the selected element.

Styling in Tailwind UI way requires as result a lot of efforts, but PrimeVue design language is also good, so, here we follow PrimeVue language.
*/
.p-select-panel .p-select-items .p-select-item.p-highlight,
.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight,
.p-tree .p-treenode .p-treenode-content.p-highlight,
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item.p-highlight {
  background: var(--highlight-bg);
}

.p-select-panel .p-select-items .p-select-item:not(.p-highlight):not(.p-disabled):hover,
.p-multiselect-panel .p-multiselect-items .p-multiselect-item:not(.p-highlight):not(.p-disabled):hover,
.p-tree .p-treenode .p-treenode-content.p-treenode-selectable:not(.p-highlight):hover,
.p-autocomplete-panel .p-autocomplete-items .p-autocomplete-item:hover {
  background: var(--input-list-item-hover-bg);
}

.p-select-panel .p-select-items .p-select-item .p-checkbox,
.p-multiselect-panel .p-multiselect-items .p-multiselect-item .p-checkbox {
  @apply mr-2;
}

.p-tree-toggler-icon {
  /* same color as p-treeselect-trigger */
  @apply pr-0.5;
}
